<template>
    <div class="star-container" :class="initStarSizeClass">
        <span v-for="starItem in initStarArr" class="star-item" :class="starItem"></span>
    </div>
</template>
<script type="es6">
    const CLS_ON ='on'
    const CLS_OFF = 'off'
    const CLS_HALF = 'half'
    const STAR_LENGTH = 5
    export default {
        props:{
            size:{
                type:Number
            },
            score:{
                type:Number
            }
        },
        //这里面的方法只要其依赖的数据源不发生变化就不会重新执行
        computed:{
            //初始化星星组件的大小
            initStarSizeClass () {
                return 'star-'+this.size
            },
            //获取星星数组
            initStarArr () {
                var starArr = []
                //对0.5进行取整，若没有小数则证明小于0.5，包含小数则大于0.5，若大于0.5则可以取半星
                var scoreResult = Math.floor(this.score*2)/2
                //判断是否包含有半星
                var isHasHalfStar = scoreResult % 1 == 0?false:true

                for(let i=0;i<parseInt(scoreResult);i++){
                    starArr.push(CLS_ON)
                }
                if(isHasHalfStar){
                    starArr.push(CLS_HALF)
                }
                while(starArr.length<STAR_LENGTH){
                    starArr.push(CLS_OFF)
                }

                return starArr
            }
        }
    }
</script>
<style lang="less" rel="stylesheet/less" scoped>
    @import '../../../public/stylesheet/mixin.less';
    .star-container{
        font-size:0;
        display:inline-block;
        .star-item{
            display:inline-block;
        }
    }
    .star-24{
        .star-item{
            &:not(:last-child){
                margin-right:3px;
            }
            background-size:10px 10px;
            width:10px;
            height:10px;
        }
        .on{
            .bg-img('star24_on');
        }
        .off{
            .bg-img('star24_off');
        }
        .half{
            .bg-img('star24_half')
        }
    }
    .star-36{
        .star-item{
            &:not(:last-child){
                margin-right:6px;
            }
            background-size:15px 15px;
            width:15px;
            height:15px;
        }
        .on{
            .bg-img('star36_on');
        }
        .off{
            .bg-img('star36_off');
        }
        .half{
            .bg-img('star36_half')
        }
    }

    .star-48{
        .star-item{
            &:not(:last-child){
                margin-right:20px;
            }
            background-size:20px 20px;
            width:20px;
            height:20px;
        }
        .on{
            .bg-img('star48_on');
        }
        .off{
            .bg-img('star48_off');
        }
        .half{
            .bg-img('star48_half')
        }
    }
</style>